<template>
  <div class="basic-box">
    <div class="header">
      <div class="left">
        <el-image class="cover" :src="bookDetail.cover" style="width: 200px" />
      </div>
      <div class="mid">
          <div v-for="(item,index) in bookMap" :key="index">
            <div class="cell">
              <div class="title">
                {{item.title}} :&nbsp;
              </div>
              <div class="content">
                {{bookDetail[item.key]}}
              </div>
            </div>
          </div>
      </div>
      <div class="right">
        <el-button icon="el-icon-edit" type="primary" @click="toEditMode">编辑</el-button>
      </div>
    </div>
    <div class="summary">
      <div class="summary-title">
        内容概要
      </div>
      <div class="summary-content">
        {{bookDetail.summary}}
      </div>
    </div>
    <el-dialog title="输入编辑内容" :visible.sync="isEditMode" width="50%" center @closed="destroyDialog">
<!--      <span>-->
        <div v-for="(item,index) in bookMap" :key="index">
          <div class="cell" v-if="item.key !=='category'">
              <div class="title-edit">
                {{item.title}} :&nbsp;
              </div>
              <div class="content">
                <el-input v-model="editData[item.key]" placeholder="请输入内容"></el-input>
              </div>
            </div>
          <div class="cell" v-else>
            <div class="title-edit">书籍类型</div>
            <div class="content">
              <el-select v-model="editData['category']" placeholder="请选择书籍类型" style="width: 100%" @change="changeEditCategory">
                <el-option v-for="item in categoryList" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </div>

        </div>

      <div class="cell" style="align-items: flex-start;margin-top: 30px">
        <div class="title-edit">
          内容概要 :&nbsp;
        </div>
        <el-input style="width: 70%" type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容概要信息" v-model="editData.summary"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="destroyDialog">撤 销 修 改</el-button>
    <el-button type="primary" @click="confirmEdit">确 定 修 改</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
import { getBookDetailByIsbn , updateBookDetail, getCategoryList} from '@/api/book.js'
import { Message } from 'element-ui'
export default {
  name: 'BookDetail',
  data() {
    return {
      isbn: '',
      isEditMode:false,
      selectIndex:0,
      bookDetail: {
        "isbn": 9787020028115,
        "cover": "https://img3.doubanio.com/view/subject/s/public/s1146040.jpg",
        "title": "骆驼祥子",
        "author": "老舍",
        "press": "人民文学出版社",
        "date": "2000-3-1",
        "page": 224,
        "summary": "《骆驼祥子》是老舍用同情的笔触描绘的一幕悲剧：二十年代的北京，一个勤劳、壮实的底层社会小人物怀着发家、奋斗的美好梦想，却最终为黑暗的暴风雨所吞噬。它揭示了当时“小人物”的奴隶心理和希望的最终破灭。随着祥子心爱的女人小福子的自杀，祥子熄灭了个人奋斗的最后一朵火花。这是旧中国老北京贫苦市民的典型命运。",
        "category": "文学"
      },
      editData:{

      },
      categoryList:[
        { value: '0', label: '禁用' },
        { value: '1', label: '启用' },
      ],
      bookMap: [
        { key: "title", title: "书籍名称" },
        { key: "author", title: "作者" },
        { key: "press", title: "出版社" },
        { key: "date", title: "出版日期" },
        { key: "page", title: "页数" },
        { key: "category", title: "书籍类型" }
      ]
    }
  },
  mounted() {
    console.log(this.$route.query.id)
    this.isbn = this.$route.query.id
    this.getBookData()
  },
  methods: {
    toEditMode(){
        this.isEditMode = true
      // for(var i in this.bookDetail)
      //     this.editData[i] = this.bookDetail[i]
      this.editData = this.bookDetail
        this.getCategoryList()
    },
    destroyDialog(){
      this.editData = {}
      this.isEditMode = false
    },
    changeEditCategory(e){
        console.log(e)
        this.selectIndex = e
    },
    confirmEdit(){
    //    发送表单
      this.editData['category'] = this.categoryList[this.selectIndex].label
      this.editData['cid'] = this.categoryList[this.selectIndex].cid
      this.editData['page'] = Number(this.editData['page'])
      updateBookDetail(this.editData).then(
        res=>{
          if(res.status === 200)
            Message({
              message: '操作成功',
              type: 'success',
              duration: 5 * 1000
            })
        }
      )
      console.log(this.editData)
      this.destroyDialog()

    },
    getBookData() {
      getBookDetailByIsbn(this.isbn).then((res) => {
        console.log(res.data.detail)
        this.bookDetail = res.data.detail
      })
    },
    getCategoryList(){
      getCategoryList().then(
        res=>{
          this.categoryList = []
          console.log(res.data.list)
          for(var i = 0;i < res.data.list.length;i++){
            var element = {}
            element['label'] = res.data.list[i].name
            element['value'] = i
            element['cid'] = res.data.list[i].id
            this.categoryList.push(element)
          }
        }
      )
    }
  }
}
</script>

<style scoped lang="less">
  .basic-box{
    margin: 40px;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
  }
  .header{
    display: flex;
    flex-direction: row;
    .left{
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .cover{
        border-radius: 10px;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
      }
    }
    .mid{
      width: 50%;
    }
    .right{
      width: 20%;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      margin-right: 20px;
      /*justify-content: flex-end;*/
    }
  }
  .cell{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin:10px;
    .title{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
    }
    .title-edit{
      font-size: 20px;
      font-weight:800;
      color: #11A983;
      width: 150px;
    }
    .content{
      font-size: 20px;
      font-weight: 500;
      width: 300px;
    }
  }
  .summary{
    margin: 30px 40px;
    width: 90%;
    .summary-title{
      font-size: 25px;
      color: #2c3e50;
      font-weight: bolder;
    }
    .summary-content{
      margin-top: 20px;
      font-size: 20px;
    }
  }
</style>
